

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Data Analysis WebSocket</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #output {
            border: 1px solid #ccc;
            padding: 10px;
            height: 300px;
            overflow-y: scroll;
            margin-top: 10px;
        }
        #input-container {
            margin-top: 20px;
        }
        #input-container input {
            width: 70%;
            padding: 10px;
            font-size: 16px;
        }
        #input-container button {
            padding: 10px 20px;
            font-size: 16px;
        }
    </style>
</head>
<body>
<h1>GBI demo (暂时只支持查 测试环境 T05 镜像)</h1>
<div id="input-container">
    <input type="text" id="gbi_input" value="最近一年票房最高的几个日期" />
    <button onclick="sendRequest()">提问</button>
</div>
<div>
    <span>sessionId:</span><input type="text" id="sessionId" value="" />
    <span>tenantId:</span><input type="text" id="tenantId" value="" />
    <span>cinemaUid:</span><input type="text" id="cinemaUid" value="" />
</div>
<span>思考过程:</span>
<div id="output"></div>
<span>思考结果:</span>
<div id="output2"></div>

<script>
    let socket;
    function connectWebSocket() {
        socket = new WebSocket(getWebSocketUrl("/api/ws/gbi"));

        socket.onopen = function() {
            console.log('WebSocket connection opened');
        };

        socket.onmessage = function(event) {
            const data = event.data;
             try {
                const response = JSON.parse(data);
                console.log('Received DataAnalysisResponse:', response);

                // 处理 response 对象
                const { sessionId, requestId, evidence, eventName, rewrite, sql, resData, sqlError, visualization, visualizationData} = response;

                document.getElementById('sessionId').value = sessionId;
                // 示例：将数据追加到输出区域
                document.getElementById('output').innerHTML = `sessionId: ${sessionId}<br/>`;
                document.getElementById('output').innerHTML += `requestId: ${requestId}<br/>`;
                document.getElementById('output').innerHTML += `Event Name: ${eventName}<br/>`;
                document.getElementById('output').innerHTML += `Rewrite: ${rewrite}<br/>`;
                document.getElementById('output').innerHTML += `evidence: ${evidence}<br/>`;
                document.getElementById('output').innerHTML += `SQL: ${sql}`;
                document.getElementById('output').innerHTML += `<br/> ${sqlError}`;
                document.getElementById('output2').innerHTML = `${visualization}`;
            } catch (error) {
                document.getElementById('output').innerHTML += `计算失败: ${sqlError}`;
            }
        };

        socket.onclose = function() {
            console.log('WebSocket connection closed');
        };

        socket.onerror = function(error) {
            console.error('WebSocket error:', error);
        };
    }

    function sendRequest() {
        const input = document.getElementById('gbi_input').value;
        const requestData = {
            query: input,
            sessionId: document.getElementById('sessionId').value,
            tenantId: document.getElementById('tenantId').value,
            cinemaUid: document.getElementById('cinemaUid').value
        };
        const message = JSON.stringify(requestData);
    
        // resetPreviewTabs($("#outputTable"));
        if (socket && socket.readyState === WebSocket.OPEN) {
            socket.send(message);
        } else {
            connectWebSocket();
            socket.onopen = function() {
                socket.send(message);
            };
            console.log('WebSocket is not connected. Attempting to connect...');
        }
    }

    function getWebSocketUrl(subUrl) {
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const host = window.location.host;
        const pathname = window.location.pathname;
        
        // 提取第一级目录
        const pathParts = pathname.split('/').filter(part => part.length > 0);
        const firstLevelDirectory = pathParts.length > 0 ? pathParts[0] : '';
        
        return `${protocol}//${host}/${firstLevelDirectory}/${subUrl}`;
    }
</script>
</body>
</html>